<template>
  <div class="w-full h-[91px] flex flex-row items-center justify-between s2k:h-[121.3px] s4k:h-[182px] border-b border-solid border-[var(--grid)]">
    <div class="ml-[24px] s2k:ml-[32px] s4k:ml-[48px] flex flex-col">
      <span class="text-[2rem] text-[var(--theme-font-color)] font-[600] font-Inter">VA Setup</span>
    </div>
  </div>
  <div class="flex flex-row h-[calc(100vh_-_265px)] s2k:h-[calc(100vh_-_353.3px)] s4k:h-[calc(100vh_-_530px)] relative">
    <div class="flex-[4]">
      <div class="h-[91px] flex flex-row items-center justify-between s2k:h-[121.3px] s4k:h-[182px] border-b border-solid border-[var(--grid)]">
        <div class="ml-[24px] s2k:ml-[32px] s4k:ml-[48px] flex flex-col">
          <span class="text-[1.66rem] text-[var(--theme-font-desc-color)] font-Inter">Visual Analysis</span>
          <span class="text-[1.13rem] text-[var(--theme-font-desc-color)] font-Inter mt-[3px] s2k:mt-[4px] s4k:mt-[6px]">2 VAs subscribed</span>
        </div>
        <div class="w-[96px] h-[41px] flex bg-[#1A56DB] cursor-pointer rounded-md s4k:rounded-[16px] mr-[24px] s2k:mr-[32px] s4k:mr-[48px]
        s2k:w-[128px] s2k:h-[54.6px] s4k:w-[192px] s4k:h-[82px]" @click="goSetup">
          <span class="m-auto text-[1.167rem] text-[var(--theme-font-color)] font-Medium font-[400]">Start VA</span>
        </div>
      </div>
      <div class="w-[96%] h-auto mx-auto flex flex-wrap justify-between">
        <div class="w-[45.5%] bg-[var(--theme)] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] p-[24px] s2k:p-[32px] s4k:p-[48px] pb-[8px] s2k:pb-[10.6px] s4k:pb-[16px] flex flx-row justify-start items-start border border-solid border-[var(--grid)] mt-[24px] s2k:mt-[32px] s4k:mt-[48px]">
          <img :src="img1" alt="" class="w-[180px] s2k:w-[240px] s4k:w-[360px] h-[120px] s2k:h-[160px] s4k:h-[240px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px]">
          <div class="w-full ml-[32px] s2k:ml-[42.6px] s4k:ml-[64px]">
            <div class="w-full flex flex-row justify-between items-start">
              <div class="text-[1.66rem] text-[var(--theme-font-color)] flex flex-col justify-start">
                <span>Pedestrian Flow Analysis</span>
                <span class="text-[#6B7280] text-[1.13rem] mt-[4px] s2k:mt-[5.3px] s4k:mt-[8px]">Perimeter Security and Surveillance</span>
              </div>
            </div>
            <div class="w-full text-[var(--theme-font-desc-color)] text-[1.13rem] leading-[160%] my-[12px] s2k:my-[16px] s4k:my-[24px]">
              Video analytics for pedestrian flow analysis employs AI to monitor and analyse pedestrian movement, facilitating efficient crowd management and urban planning.
            </div>
          </div>
        </div>
        <div class="w-[45.5%] bg-[var(--theme)] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] p-[24px] s2k:p-[32px] s4k:p-[48px] pb-[8px] s2k:pb-[10.6px] s4k:pb-[16px] flex flx-row justify-start items-start border border-solid border-[var(--grid)] mt-[24px] s2k:mt-[32px] s4k:mt-[48px]">
          <img :src="img2" alt="" class="w-[180px] s2k:w-[240px] s4k:w-[360px] h-[120px] s2k:h-[160px] s4k:h-[240px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px]">
          <div class="w-full ml-[32px] s2k:ml-[42.6px] s4k:ml-[64px]">
            <div class="w-full flex flex-row justify-between items-start">
              <div class="text-[1.66rem] text-[var(--theme-font-color)] flex flex-col justify-start">
                <span>Facial Recognition</span>
                <span class="text-[#6B7280] text-[1.13rem] mt-[4px] s2k:mt-[5.3px] s4k:mt-[8px]">Perimeter Security and Surveillance</span>
              </div>
            </div>
            <div class="w-full text-[var(--theme-font-desc-color)] text-[1.13rem] leading-[160%] my-[12px] s2k:my-[16px] s4k:my-[24px]">
              Video analytics for facial recognition employs AI to identify individuals, enhancing security and enabling personalised experiences in various applications.
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-[1] border-l border-solid border-[var(--grid)]">
      <div class="m-auto w-[85%] h-[200px] mt-[24px] s2k:mt-[32px] s4k:mt-[48px] font-Inter  text-[var(--theme-font-color)] text-[1.33rem]">
        <p class="text-[1.66rem] text-[var(--theme-font-desc-color)]">Credits</p>
        <p class="font-[600] mt-[24px] s2k:mt-[32px] s4k:mt-[48px]">VA Month-to-Month Subscription </p>
        <p class="mt-[3px] s2k:mt-[4px] s4k:mt-[6px]">30 Downloads Per Month</p>
        <p class="font-[600] mt-[24px] s2k:mt-[32px] s4k:mt-[48px]">Standard License </p>
        <p class="mt-[3px] s2k:mt-[4px] s4k:mt-[6px]">Monthly payment, cancel anytime</p>
        <p class="font-[600] mt-[24px] s2k:mt-[32px] s4k:mt-[48px]">Plan expires </p>
        <p class="mt-[3px] s2k:mt-[4px] s4k:mt-[6px]">1 July 2024 at 2:04 pm</p>
        <p class="font-[600] mt-[24px] s2k:mt-[32px] s4k:mt-[48px]">Downloads remaining </p>
        <p class="mt-[3px] s2k:mt-[4px] s4k:mt-[6px]">2 / 30 this month (ends 1 July 2024 at 2:04 pm)</p>
      </div>
    </div>
    
    <div
      class="w-full h-[64px] absolute bottom-[-64px] s2k:bottom-[-85.33px] s4k:bottom-[-128px] z-[999] bg-theme s4k:h-[128px] s2k:h-[85.3px]">
      <div
        class="w-full h-[100%] border-solid border-[1px] border-[var(--grid)] px-[16px] bg-[var(--theme)] s4k:px-[32px] s2k:px-[21.3px] flex flex-row justify-start items-center"
        style="border-left: none;border-right: none;border-bottom: none;">
        <div class="text-[1.13rem] text-[#9CA3AF] font-Medium">
          Showing <span class="text-[var(--theme-font-color)]">1</span> of <span class="text-[var(--theme-font-color)]">2</span>
        </div>
        <div class="ml-auto flex w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] border-solid border border-[var(--grid)] rounded s2k:rounded-[5.3px] s4k:rounded-[8px] mr-[30px] s2k:mr-[40px] s4k:mr-[60px]">
          <span class="m-auto text-[var(--theme-font-desc-color)] text-[1rem]">1</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted ,reactive,ref} from "vue";
import settingStore from '@/store/modules/setting'
const store = settingStore()
import { useRouter } from "vue-router";
const router = useRouter()
import img1 from '@/assets/image/vastore1.png'
import img2 from '@/assets/image/vastore2.png'

const goSetup = () => {
  router.push('/Vas/vasetup')
  store.setVAindex(3)
}
</script>



<style>

</style>